<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="../../css/mui.min.css" />
<link rel="stylesheet" href="../../css/app.css" />
</head>
<body class="of-hidden">
    <header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 id="title" class="mui-title">原生动画</h1>
    </header>
    <div class="mui-content">
        <ul id="list1" class="mui-table-view">
            <li data-action="item1" class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    Item 1
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    Item 2
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    Item 3
                </a>
            </li>
        </ul>
    </div>
    <script src="../../js/mui.min.js"></script>
    <script src="../../js/app.js"></script>
    <script type="text/javascript">
        (function($, doc) {
            var sh = 0; // status bar height
            app.immersion(function(h) {
                sh = h;
                doc.querySelector('header').classList.add('immersion');
            });
            $.init();
            var ws, wn, bm1, bm2;
            $.plusReady(function() {
                ws = plus.webview.currentWebview();
                bm1 = new plus.nativeObj.Bitmap();
                ws.draw(bm1, function() {
                    console.log("bm1 draw success");
                }, function(e) {
                    console.log("bm1 draw fail:" + JSON.stringify(e));
                });

                wn = plus.webview.create('http://www.xiami.com', 'item1', {
                    popGesture: 'hide'
                });
                wn.addEventListener('loaded', function() {
                    bm2 = new plus.nativeObj.Bitmap();
                    wn.draw(function() {
                        console.log("bm2 draw success");
                    }, function(e) {
                        console.log("bm2 draw fail:" + JSON.stringify(e));
                    });
                }, false);
            });

            $('#list1').on('tap', 'li', function() {
                switch (this.dataset.action) {
                    case 'item1':
                        wn.show('pop-in', 300, function() {
                            bm1 && bm1.clear();
                            bm2 && bm2.clear();
                        }, {
                            capture: bm2,
                            otherCapture: bm1
                        });
                        break;
                }
            });
        })(mui, document);
    </script>
</body>
</html>